
<template>
	<!-- 赵笛 2023年4月4日 -->
	<!-- 商品详情 -->
	<view style="background:#F5F5F5">
		<u-notify :message="errorMessage" :type="type" :show="show"></u-notify>
		<u-navbar height="44px" title="商品详情" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<u-swiper height="320" class="swiper" :list="imgList" indicator indicatorMode="line" circular></u-swiper>
		<u-skeleton rowsHeight="20" rows="3" title :loading="lodingFlag"></u-skeleton>
		<view class="content-box">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="9">
					<view class="demo-layout bg-purple-light">
						<p>
							<span class="text-title" style="font-size:15px">{{commodityData.commodityName}}</span>
							<span class="text-dark" style="margin-left:20px" v-for="t in commodityData.tag.split(',')">#{{t}}</span>
						</p>
						<p class="text-dark">{{commodityData.back}}</p>
					</view>
				</u-col>*
				<u-col span="3">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view class="text-center">
								<u-icon name="star-fill" color="#3CCCA6" size="28"></u-icon>
							</view>
						</u-col>
						<u-col span="8">
							<view class="text-center" style="color:#3CCCA6;">
								<div style="font-weight:bold;">98.9%</div>
								<div>好评率</div>
							</view>
						</u-col>
					</u-row>

				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="8">
					<view>
						<span style="color:#E06181;font-weight: bold;">¥{{commodityData.favorablePrice}}</span>
						<span class="text-light"
							style="text-decoration:line-through;margin-left:10px">¥{{commodityData.price}}</span>
					</view>
				</u-col>
				<u-col span="4" id="spec">
					<view class="text-light" style="text-align: right;">购买可得{{commodityData.point}}积分</view>
				</u-col>
			</u-row>
		</view>
		<view class="view-box" style="height:24px">
			<span class="text-title" style="font-size: 14px;float:left">数量:</span>
			<u-number-box 
			    button-size="30"
			    color="#ffffff"
			    bgColor="#3CCCA6"
			    iconStyle="color: #fff"
					integer
					v-model="commodityNumber"
					style="float:left;margin-left:10px"
			></u-number-box>
		</view>
		<!-- line-height: 24px;
		background: #fff;
		padding: 16px 10px;
		margin-bottom: 6px;
		class="view-box" -->
		<view class="view-box" style="height: 24px;">
			<view class="text-title" style="font-size: 14px;float:left" id="address">服务：</view>
			<view class="text-light" v-for="service in serviceList" style="float:left;">
				<view style="margin-right: 10px;">{{service}}</view>
			</view>
		</view>
		<view class="view-box" style="height: 48px;">
			<u-row>
				<u-col span="2">
					<span class="text-title" style="font-size: 14px;float:left">配送至：</span>
				</u-col>
				<u-col span="10">
					<span class="text-light">
					<!-- <input type="text"v-model="addressId" @change="getAddressById()"> -->
					{{address.addressLocationProvince}}
					{{address.addressLocationCity}}
					{{address.addressLocationCounty}}</span>
					<u-button type="primary" color='#999999' :customStyle="addressButtonStyle"
					class="address-button-box" plain icon="map" text="请选择地址"
					v-if="addressButtonFlag"
					@click="toAddressPage"></u-button>
				</u-col>
			</u-row>
			<u-button type="primary" color='#999999' :customStyle="addressButtonStyle"
			class="address-button-box" plain icon="map" text="修改地址"
			v-if="!addressButtonFlag"
			@click="toAddressPage"></u-button>
		</view>
		<view class="view-box">
			<p class="text-title">买家评论：</p>
			<view class="u-page" v-for="comment in commentList" :key="comment.id">
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="album">
							<view class="album__avatar">
								<!-- <image :src="'http://101.43.223.224:8765/image/getImageById?id='+comment.avatarId" mode="" style="width: 32px;height: 32px;"></image> -->
								<image :src="comment.url" mode="" style="width: 32px;height: 32px;"></image>
							</view>
							<view class="album__content">
								<u--text class="text-title" :text="comment.name" bold size="14"></u--text>
								<p>
									<span class="text-dark" style="color: #E06181;font-size: 12px;">{{comment.createTime | dateFormat}}</span>
								</p>
								<p>
									<span style="float:left;;" class="text-light">商品描述：</span>
									<u-rate :value="comment.productDescriptionRating" active-color="#E06181" readonly style="float: left;">
									</u-rate>
								</p>
								<p>
									<span style="float:left;;" class="text-light">卖家态度：</span>
									<u-rate :value="comment.sellerAttitudeRating" active-color="#E06181" readonly style="float: left;">
									</u-rate>
								</p>
								<p>
									<span style="float:left;;" class="text-light">发货速度：</span>
									<u-rate :value="comment.shippingSpeedRating" active-color="#E06181" readonly style="float: left;">
									</u-rate>
								</p><span style="float:right" class="text-dark">{{comment.spec}}</span>
								<u--text margin="0 0 8px 0" size='14' color='#666666' :text="comment.content">
								</u--text>
								<u-album :urls="comment.commentImgList" keyName="src2"></u-album>
							</view>
						</view>
					</view>
				</view>
			</view>
<!-- 			<u-button :plain="true" text="查看全部评论" style="margin-top:10px;" 
				v-if ="commentList.length !==0"></u-button> -->
			<u-empty
				mode="list"
				text="暂无评论"
				icon="http://cdn.uviewui.com/uview/empty/data.png"
				v-if="commentList.length === 0"
			>
			</u-empty>
		</view>
		<view class="view-box">
			<u-tabs @click="click" :activeStyle="{
            color: '#E06181'
        }" lineColor="#f56c6c" :list="[{name:'产品参数'},{name:'咨询与售后'}]" style="width:180px;margin: 0 auto;"></u-tabs>
			<u-empty
				mode="list"
				text="暂无产品参数"
				icon="http://cdn.uviewui.com/uview/empty/data.png"
				v-if="specList.length === 0"
			></u-empty>
			<u-row customStyle="margin-bottom: 10px"
			v-if ="specList.length !==0 && tagFlag"v-for="spec in specList"
				style="margin-bottom:20px;">
				<u-col span="1.3">
					<u-icon name="photo" color="#999999" size="28"></u-icon>
				</u-col>
				<u-col span="10.7">
					<p class="text-dark">{{spec.specName}}</p>
					<p class="text-light" style="margin-top:6px;">{{spec.specValue}}</p>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px"
			v-if ="!tagFlag"v-for="service in serviceList"
				style="margin-bottom:20px;">
				<u-col span="1.3">
					<u-icon name="checkbox-mark" color="#E06181" size="28"></u-icon>
				</u-col>
				<u-col span="10.7">
					<p class="text-dark">{{service}}</p>
					<p class="text-light" style="margin-top:6px;">{{spec.specValue}}</p>
				</u-col>
			</u-row>
		</view>
		<view class="view-box">
			<u--image v-for="img in imgDetailList" :showLoading="true" :src="img" width="100%"></u--image>
		</view>
		<!-- 商品规格弹出层 -->
		<u-popup :show="specWindowFlag" mode="bottom" closeable="true"
		@close="specWindowClose">
			<view class="popup-box">
				<view v-for="(spec,index) in specList" :key="spec.id" v-if="spec.chooseFlag">
					<p class="text-dark" style="height:40px;line-height:40px">{{spec.specName}}</p>
					<u-radio-group
						v-model="spec.radiovalue"
						placement="column"
						@change="groupChange(index)"
						activeColor="#E06181"
						class="text-light"
						>
						<u-radio
							:customStyle="{marginBottom: '8px'}"
							v-for="(item,i) in spec.specValue.split(',')"
							:key="i"
							:label="item"
							:name="item"
							@change="radioChange"
						>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</u-popup>
		<!-- <view class="bottom-nav">
			<u-icon name="star" size='38' class="icon-box" color="#CACACA" @click="addCommodityCollection()" v-if="!starCheckFlag"></u-icon>
			<u-icon name="star-fill" size='38' class="icon-box" color="#E06181" @click="addCommodityCollection()" v-if="starCheckFlag"></u-icon>
			<u-icon name="kefu-ermai" size='36' class="icon-box" color="#CACACA" @click="toChatPage()"></u-icon>
			<u-icon name="shopping-cart" size='44' class="icon-box" color="#CACACA" @click="toShoppingCartPage()"></u-icon>
			<u-button text="立即付款" class="button-box" style="background:#E06181" @click="toOrderPage()" id="counter1"></u-button>
			<u-button id='counter' text="加入购物车" class="button-box" @click="addToShoppingCart"></u-button>
		</view> -->
		<!-- 底部栏 -->
		<view style="width: 100%;height: 50px;background:#fff;">
			<u-tabbar
				:value="value6"
				@change="name => value6 = name"
				:fixed="true"
				:placeholder="true"
				activeColor="grey"
				inactiveColor="black"
				:safeAreaInsetBottom="true"
				>
				<u-tabbar-item @click="addCommodityCollection()" v-if="!starCheckFlag" style="margin-left: -10px;" text="收藏" icon="star"></u-tabbar-item>
				<u-tabbar-item icon="star-fill" color="#FF8888"  @click="addCommodityCollection()" v-if="starCheckFlag" style="margin-left:-10px;" text="收藏"></u-tabbar-item>
				<u-tabbar-item @click="toChatPage()" style="margin-left: -30px;" text="客服" icon="kefu-ermai" dot></u-tabbar-item>
				<u-tabbar-item @click="toShoppingCartPage" style="margin-left: -30px;" text="购物车" icon="shopping-cart"></u-tabbar-item>
				<button @click="addToShoppingCart" style="background:#E06181;border-radius: 20px;width:200px;color:#ffffff;margin-right:10px;font-size:16px;height:40px;margin-top:5px;">加入购物车</button>
				<button @click="toOrderPage" style="background:#3CCCA6;border-radius: 20px;width:200px;color:#ffffff;margin-right:10px;font-size:16px;height:40px;margin-top:5px;">立即付款</button>
				
			</u-tabbar>
		</view>`
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//当前登录用户id
				userId:0,
				//商品图片
				imgList: [],
				//商品图片
				imgDetailList: [],
				//当前商品
				commodityId: '',
				commodityData: {},
				//骨架框显示隐藏
				lodingFlag: true,
				//用户配送地址
				address: {
					addressLocationProvince: '',
					addressLocationCity: '',
					addressLocationCounty: '',
				},
				albumWidth: 0,
				//评论列表
				commentList: [],
				//规格列表
				specList: [],
				// 基本案列数据
				radiolist1: [],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: "111",
				tagFlag: true,
				storeList: [{
					id: 1,
					storeName: '深圳坂田自然堂',
					score: '4.7',
					address: '深圳市坂田街道11号',
					imgId: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
				}, {
					id: 1,
					storeName: '深圳坂田自然堂',
					score: '3.0',
					address: '深圳市坂田街道11号',
					imgId: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
				}, {
					id: 1,
					storeName: '深圳坂田自然堂',
					score: '5.0',
					address: '深圳市坂田街道11号',
					imgId: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
				}],
				//规格选择窗口
				specWindowFlag:false,
				//用于生成订单的商品信息
				commodityInfo:{},
				//选中的规格信息
				specChooseList:[],
				//当前用户地址列表
				userAddressList:[],
				//地址按钮样式
				addressButtonStyle:{
					border:'none'
				},
				addressId:0,
				addressButtonFlag:true,
				commodityNumber:1,
				show:false,
				errorMessage:'',
				type:'primary',
				serviceList:['七天可退换','退货返运费','满300包邮'],
				//收藏状态
				starCheckFlag:false
			}
		},
		onLoad(option) {
			this.userId = wx.getStorageSync('user').id
			this.commodityInfo.userId = this.userId
			this.commodityId = option.id
			this.getCommodityById()
			this.getCommoditySpecById()
			this.getCommentByCommodityId()
			if(this.userId!==0&&this.commodityId!=0){
				this.saveUserHistory()
			}
			this.selectCollection()
		},
		methods: {
			selectCollection(){
				this.$myRequest({
					url: '/commodityCollection/selectCollection',
					data: {
						userId:this.userId,
						commodityId:this.commodityId
					}
				}).then(res => {
					if(res.data.data === 1){
						this.starCheckFlag = true
					}else{
						this.starCheckFlag = false
					}
				})
			},
			addCommodityCollection(){
				//判断商品是否被收藏
				if(!this.starCheckFlag){
					//未收藏
					this.$myRequest({
						method:'POST',
						url: '/commodityCollection/insertCommodityCollection',
						data: {
							userId:this.userId,
							commodityId:this.commodityId
						}
					}).then(res => {
						if(res.data.flag){
							//收藏成功
							uni.showToast({
								icon: 'success',
								title: '收藏成功',
								// 显示时长时间为3秒
								duration: 3000,
							})
							this.starCheckFlag = true
							console.log(res.data.data)
						}else{
							//收藏失败
							uni.showToast({
								icon: 'success',
								title: '收藏失败',
								// 显示时长时间为3秒
								duration: 3000,
							})
							console.log(res.data.data)
						}
					})
				}else{
					//已收藏
					this.$myRequest({
						method:'POST',
						url: '/commodityCollection/deleteByUserIdAndDiyId',
						data: {
							userId:this.userId,
							commodityId:this.commodityId
						}
					}).then(res => {
						if(res.data.flag){
							//取消收藏成功
							uni.showToast({
								icon: 'success',
								title: '取消收藏成功',
								// 显示时长时间为3秒
								duration: 3000,
							})
							this.starCheckFlag = false
							console.log(res.data.data)
						}else{
							//取消收藏失败
							uni.showToast({
								icon: 'success',
								title: '取消收藏失败',
								// 显示时长时间为3秒
								duration: 3000,
							})
							console.log(res.data.data)
						}
					})
				}
			},
			//跳转至购物车页面
			toShoppingCartPage(){
				uni.switchTab({
					url:'/pages/shoppingtrolley/ShoppingTrolley'
				})
			},
			//跳转至聊天页面
			toChatPage(){
				uni.navigateTo({
					url:'/pages/chat/ChatFrontView'
				})
			},
			//保存用户浏览历史
			saveUserHistory(){
				let historyData={
					userId:this.userId,
					itemId:this.commodityId,
					//商品
					itemType:0
				}
				this.$myRequest({
					url: '/commodity/detail/saveUserHistory',
					method:'POST',
					data: historyData
				}).then(res => {
					if(res.data.flag){
						console.log(res.data.data)
					}else{
						console.log(res.data.data)
					}
				})
			},
			//跳转至订单页面
			toOrderPage(){
				//已选择规格，校验是否选择地址
				if(this.addressId!=0){
					let commodityIds = []
					commodityIds.push(this.commodityId)
					//已选择地址
					this.commodityInfo={
						userId:this.userId,
						commodityIds:commodityIds,
						diyIds:[],
						commodityQuantity:this.commodityNumber,
						addressId:this.addressId,
						// commoditySpec:this.specChooseList.filter(item=> item).join(','),
						serviceList:this.serviceList,
						numbers:[this.commodityNumber],
						isNoDiy:0
					}
					let commodityInfo = encodeURIComponent(JSON.stringify(this.commodityInfo))
					
					uni.navigateTo({
						url: '/pages/goods/OrderView?commodityInfo='+commodityInfo
					})
				}else{
					//未选择地址（提示选地址）
					uni.showToast({
						icon: 'error',
						title: '请选择地址',
						// 显示时长时间为3秒
						duration: 3000,
					})
				}
			},
			//加入购物车
			addToShoppingCart(){
				//已选择规格
				this.commodityInfo={
					userId:this.userId,
					commodityId:this.commodityId,
					diyId:0,
					businessName:'乐工坊',
					number:this.commodityNumber,
					commoditySpec:this.specChooseList.filter(item=> item).join(','),
					returnAndExchangePolicy:this.serviceList[0],
					isNoDiy:0
				}
				console.log(this.commodityInfo)
				//将商品加入购物车
				this.$myRequest({
					url: '/shoppingCart/saveShoppingCart',
					method:'POST',
					data: this.commodityInfo
				}).then(res => {
					
					if(res.data.flag){
						//加入购物车成功
						uni.showToast({
							icon: 'success',
							title: '加入购物车成功',
							// 显示时长时间为3秒
							duration: 3000,
						})
						console.log(res.data.data)
					}else{
						//加入购物车失败
						uni.showToast({
							icon: 'error',
							title: '加入购物车失败',
							// 显示时长时间为3秒
							duration: 3000,
						})
					}
				})
			},
			//跳转至规格的位置并打开窗口
			toSpecAndOpenSpecWindows(){
					//未选择规格（跳转至规格的位置，显示规格选择窗口）
					//spec是将要跳转区域的id
					this.specWindowFlag = true
					const returnEle = document.querySelector("#spec") 
					if (!!returnEle) { 
						// true 是默认的
						returnEle.scrollIntoView(true)
					}
					//这里的counter1是将要返回地方的id
					document.querySelector("counter").scrllIntoView(true)
			},
			//根据id查询地址
			getAddressById(){
				if(this.addressId!=0){
					this.$myRequest({
						url: '/commodity/detail/getAddressById',
						data: {
							addressId: this.addressId
						}
					}).then(res => {
						if(res.data.flag){
							this.address = res.data.data
							console.log(this.address)
							this.addressButtonFlag = false
						}else{
							this.commentList = []
						}
					})
				}
			},
			//跳转至收货地址页面
			toAddressPage(){
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/goods/AddressView',
				})
				// this.$router.push({
				// 	path: '/pages/goods/addressView',
				// })
			},
			//关闭规格窗口 
			specWindowClose(){
				this.specWindowFlag=false
			},
			//打开规格选择窗口
			specWindowOpen(){
				this.specWindowFlag=true
			},
			//根据商品id查询当前商品的评论
			getCommentByCommodityId() {
				this.$myRequest({
					url: '/commodity/detail/getCommentByCommodityId',
					data: {
						commodityId: this.commodityId
					}
				}).then(res => {
					if(res.data.flag){
						this.commentList = res.data.data
						for (var i = 0; i < this.commentList.length; i++) {
							this.commentList[i].commentImgList =[]
							var imgIds = this.commentList[i].pictureGroup.split(',')
							for (var j = 0; j < imgIds.length; j++) {
								this.commentList[i].commentImgList.push('http://101.43.223.224:8765/image/getImageById?id='+imgIds[j])
							}
						}
						console.log("1111"+JSON.stringify(this.commentList))
					}else{
						this.commentList = []
					}
				})
			},
			//根据商品id查询当前商品属性
			getCommoditySpecById() {
				this.$myRequest({
					url: '/commodity/detail/getCommoditySpecById',
					data: {
						commodityId: this.commodityId
					}
				}).then(res => {
					if(res.data.flag){
						this.specList = res.data.data
					}else{
						this.specList = []
					}
					console.log(this.specList)
				})
			},
			//根据id查询当前商品
			getCommodityById() {
				this.$myRequest({
					url: '/commodity/detail/getCommodityById',
					data: {
						commodityId: this.commodityId
					}
				}).then(res => {
					this.commodityData = res.data.data
					this.imgList=[]
					this.imgDetailList=[]
					var imgIds = this.commodityData.imageId.split(',')
					for (var i = 0; i < imgIds.length; i++) {
						this.imgList.push('http://101.43.223.224:8765/image/getImageById?id='+imgIds[i])
					}
					var imgDetailIds = this.commodityData.imageViewId.split(',')
					for (var i = 0; i < imgDetailIds.length; i++) {
						this.imgDetailList.push('http://101.43.223.224:8765/image/getImageById?id='+imgDetailIds[i])
					}//骨架框
					this.lodingFlag = false
					console.log(this.commodityData)
				})
			},
			click(item) {
				if (item.index === 0) {
					this.tagFlag = true
				} else {
					this.tagFlag = false
				}
				console.log('item', item);
			},
			//规格单选框改变时
			groupChange(index) {
				console.log(this.specList[index].radiovalue)
				this.specChooseList[index] = this.specList[index].radiovalue
				// console.log('groupChange', n);
			},
			radioChange(n) {
				// console.log('radioChange', n);
			}
		}
	}
</script>
<style lang="scss" scoped>
	/**
	 * 公共样式 ↓
	 */
	.text-title {
		//文字标题样式
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.text-dark {
		//深色文字样式
		font-size: 14px;
		color: #666666;
	}

	.text-light {
		//浅色文字样式
		font-size: 14px;
		color: #999999;
	}

	.text-center {
		//居中文字样式
		text-align: center;
	}

	/**
	 * 公共样式 ↑
	 */

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.swiper {
		height: 320px;
		margin-top: 40px;
		border: 1px solid #F1F2F4;
		background: white !important;
	}

	.content-box {
		background: #fff;
		padding: 10px;
		font-size: 14px;
		color: #333333;
		margin-bottom: 10px;
	}

	.content-box p {
		margin-bottom: 8px;
	}

	.view-box {
		line-height: 24px;
		background: #fff;
		padding: 16px 10px;
		margin-bottom: 6px;
	}

	.uni-button:after {
		border: none;
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}

	.u-page {
		margin-top: 10px;
	}

	.u-text .user-name-text {
		width: 200px
	}

	.scroll-list-box {
		margin-top: 10px;
		width: 100%
	}

	.image-box {
		width: 220px;
		height: 120px;
		overflow: hidden;
	}

	.bottom-nav {
		width: 100%;
		height: 60px;
		line-height: 60px;
		font-size: 14px;
		color: #ffffff;
		background: #ffffff;
		position: fixed;
		bottom: 0
	}

	.icon-box {
		width: 30px;
		height: 60px;
		line-height: 60px;
		float: left;
		margin: 0 10px;
	}

	.button-box {
		width: 100px;
		height: 60px;
		float: right;
		color: #ffffff;
		background: #3CCCA6;
		border: none;
		border-radius: 0;
	}
	.address-button-box:after {
		border: none;
	}
	.address-button-box {
		border:0
	}
	.button-box:after {
		border: none;
	}
	.popup-box{
		width:100%;
		height:400px;
		padding:20px;
	}
	.album__content p{
		width:100%;
		height:20px;
		line-height:20px;
	}
	.u-page{
		padding:10px 0;
		border-bottom: 1px solid #f5f5f5;
	}
</style>
